<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { Warehouse } from '@element-plus/icons-vue';

const appStore = useAppStore();

const contentCls = computed(() => {
  const paddingLeft = appStore.isMobile ? '0px' : '16px';
  return [
    'client-content h-full overflow-hidden',
    `pl-${paddingLeft}`
  ];
});

// 简化显示footer的逻辑，总是显示
const showClientFooter = computed(() => true);
</script>

<template>
  <div class="client-layout h-full flex-col">
    <header class="client-header h-56px shrink-0 flex items-center px-16px bg-primary">
      <div class="flex-1 text-white">
        <h1 class="text-20px font-bold">客户端系统</h1>
      </div>
      <div class="flex items-center gap-8px">
        <router-link to="/" class="text-white hover:text-gray-200 transition-all">
          <el-icon :size="20"><Warehouse /></el-icon>
          <span class="ml-4px">返回管理系统</span>
        </router-link>
      </div>
    </header>
    <main :class="contentCls">
      <div class="client-view h-full overflow-auto p-16px">
        <RouterView />
      </div>
    </main>
    <footer v-if="showClientFooter" class="client-footer h-48px shrink-0 flex-center text-14px text-primary">
      <p>Copyright © 2023-{{ new Date().getFullYear() }} Soybean Client System</p>
    </footer>
  </div>
</template>

<style scoped>
.client-content {
  height: calc(100% - 56px);
}

.client-content:has(+ .client-footer) {
  height: calc(100% - 56px - 48px);
}
</style>